<template>
	<view>
		<!-- 一行两列租房展示 -->
		<view class="rentals-list" v-if="type == 'twoColumns'">
			<view v-for="(item, index) in res" :key="index" class="rental-item">
				<view class="image-wrapper" @click="navigateToDetailPage(item)">
					<u-image :src="item.faceUrl" width="100%" height='330rpx' mode="aspectFit">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
				<view class="rental-detail">
					<view class="title clamp" @click="navigateToDetailPage(item)">
						{{ item.villageName }}
						{{ item.type == '整租' ? item.houseNum + item.houseHall + item.toiletNum : item.roomType }}
						<span class="title-sub">{{ item.title }}</span>
					</view>
					
					<view class="desc" @click="navigateToDetailPage(item)">
						{{ item.type }} | {{ item.type == '整租' ? item.houseArea : item.roomArea }}㎡ |
						{{ item.decoration }} | {{ item.address }}
					</view>
					<view class="price-box" @click="navigateToDetailPage(item)">
						<view class="price">
							¥<span>{{ item.price }}</span>
							<span style="color: orange"> {{ item.exposureCount==1?'推荐曝光':'' }}</span>
						</view>
					</view>
					<view class="store-seller-name" v-if="storeName" @click="navigateToStoreDetailPage(item)">
						<view class="text-hidden">
							<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated"
								text="自营" type="error" />
							<span>{{ item.agentName || "暂无" }}</span>
						</view>
						<span>
							<u-icon name="arrow-right"></u-icon>
						</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 一行一列租房展示 -->
		<view v-if="type == 'oneColumns'" class="rentals-one-row">
			<view v-for="(item, index) in res" :key="index" class="rental-row">
				<view class="flex rental-col">
					<view class="rental-img" @click="navigateToDetailPage(item)">
						<u-image width="230rpx" mode="aspectFit" border-radius='16' height="230rpx" :src="item.image">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
					<view class="rental-detail">
						<view class="title clamp3" @click="navigateToDetailPage(item)">
							{{ item.villageName }}
							{{ item.type == '整租' ? item.houseNum + item.houseHall + item.toiletNum : item.roomType }}
							<span class="title-sub">{{ item.title }}</span>
						</view>
						<view class="price-box" @click="navigateToDetailPage(item)">
							<view class="price">
								¥<span>{{ item.price }}</span>
							</view>
						</view>
						<view class="desc" @click="navigateToDetailPage(item)">
							{{ item.type }} | {{ item.type == '整租' ? item.houseArea : item.roomArea }}㎡ |
							{{ item.decoration }} | {{ item.address }}
						</view>
						<view style="overflow: hidden" @click="navigateToStoreDetailPage(item)" class="count-config">
							<view class="text-hidden" v-if="storeName">
								<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated"
									text="自营" type="error" />
								<span class="line1-store-name">{{ item.agentName }}</span>
								<span class="to-store">进店<u-icon size="24" name="arrow-right" color="#666"></u-icon>
								</span>
							</view>
							<span>
								<u-icon name="arrow-right" color="#c5c5c5"></u-icon>
							</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commonTpl from '@/components/m-goods-list/common'
	export default {
		data() {
			return {
				lightColor: this.$mainColor
			}
		},
		mixins: [commonTpl],
		props: {
			// 遍历的数据
			res: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 一行两列还是一行一列显示
			type: {
				type: String,
				default: 'twoColumns',
				validator() {
					return ['twoColumns', 'oneColumns']
				}
			},
			storeName: {
				type: Boolean,
				default: true
			},
			keyword: {
				type: null,
				default: ''
			}
		},
		watch: {
			keyword(val) {
				if (val) {
					this.lightSearchStr(val)
				}
			}
		},
		methods: {
			// 跳转到租房详情
			navigateToDetailPage(item) {
				this.$u.route({
					url: '/pages/house/detail/detail',
					params: {
						houseId: item.id
					}
				})
				// uni.navigateTo({
				//   url: `/pages/rental/rentalInfo?id=${item.id}&rentalId=${item.rentalId}`,
				// });
			},
			// 跳转地址
			navigateToStoreDetailPage(item) {
				uni.navigateTo({
					url: `/pages/rental/agentPage?id=${item.agentId}`,
				});
			},
		}
	}
</script>

<style lang='scss' scoped>
	.rentals-one-row {
		padding-bottom: 250rpx;
	}

	/* 租房列表 */
	.rentals-list {
		display: flex;
		flex-wrap: wrap;
		margin: 10rpx 20rpx 284rpx;
		width: 100%;

		>.rental-item {
			background-color: #ffffff;
			display: flex;
			border-radius: 16rpx;
			flex-direction: column;
			width: calc(50% - 30rpx);
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;

			&:nth-child(2n + 1) {
				margin-right: 20rpx;
			}

			.image-wrapper {
				width: 100%;
				height: 330rpx;
				border-radius: 16rpx 16rpx 0 0;
				overflow: hidden;
				padding: 0;
			}
		}

		.count-config,
		.store-seller-name {
			font-size: $font-sm;
		}

		.text-hidden {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.rental-row {
		background: #fff;
		padding: 16rpx;

		>.rental-col {
			display: flex;

			>.rental-img {
				overflow: hidden;
				flex: 4;
			}

			>.rental-detail {
				flex: 7;
			}
		}
	}

	.rental-detail {
		margin: 0 20rpx;

		>.title {
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 1.5;
			height: auto;
			/* white-space: nowrap; */
			padding: 10rpx 0 0;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;

			.title-sub {
				font-size: 0.8em;
				/* 字体变小 */
				color: #999;
				/* 颜色变浅 */
			}
		}

		.desc {
			margin-top: 8rpx;
			font-size: 28rpx;
			color: #666;
		}

		.store-seller-name {
			color: #666;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
		}

		.count-config {
			padding: 5rpx 0;
			color: #666;
			display: flex;
			font-size: 28rpx;
			justify-content: space-between;
		}

		>.price-box {
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10rpx;
			font-size: 28rpx;
			color: $font-color-light;

			>.price {
				font-size: 26rpx;
				line-height: 1;
				color: $main-color;
				font-weight: bold;

				::v-deep span:nth-of-type(1) {
					font-size: 38rpx;
				}
			}
		}
	}
</style>